<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/weui.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<title>嘉华金融</title>
</head>
<body>
	<div class="page">
		<div class="header">
			<div><div class="back"></div></div>
			<div>分销统计</div>
			<div><div class="user-img"></div></div>
		</div>
		<div class="main">
			<div class="distribution-wrap border-bottom">
				<div>
					<div class="searchbar">
						<div class="cal left"></div>
						<input class="weui-input left data" id="showDatePicker" readonly>
						<div class="search right"></div>
					</div>
				</div>
			</div>
			<div class="distribution-ring border-bottom border-top">
				<div>
					<div class="title-circle left"></div>
					<div class="title left">产品分润收益占比</div>
				</div>
				<div class="ring-wrap" id="ringWrap" style="height: 18rem"></div>
			</div>
            <div class="distribution-table">
                <div>
                    <div class="title-circle left"></div>
                    <div class="title left">产品分润收益占比</div>
                </div>
                <div class="dis-table">
                    <table>
                        <thead>
                            <tr>
                                <th>产品</th>
                                <th>分润收益（yuan）</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="tab-tr">
                                <td>卡卡贷</td>
                                <td>111111111</td>
                            </tr>
                            <tr class="tab-tr">
                                <td>卡卡贷</td>
                                <td>111111111</td>
                            </tr>
                            <tr class="tab-tr">
                                <td>卡卡贷</td>
                                <td>111111111</td>
                            </tr>
                            <tr>
                                <td class="l-bottom-radius">卡卡贷</td>
                                <td class="r-bottom-radius">111111111</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
		</div>
		
	</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/weui.min.js"></script>
<script src="js/echarts.common.min.js"></script>
<script>
    $('#showDatePicker').on('click', function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onChange: function (result) {
            },
            onConfirm: function (result) {
                console.log(result);
                var year = result[0];
                var month = result[1];
                var day = result[2]
                $(".data").val(year+"-"+month+"-"+day)
            }
        });
    });
    var myChart = echarts.init(document.getElementById('ringWrap'));
    var option = {
        legend: {
            orient: 'horizontal',
            show:true,
            x: 'center',
            bottom: 0,

            data:['卡卡贷','拍拍贷','小赢卡贷','视频广告','现金白卡']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'卡卡贷'},
                    {value:310, name:'拍拍贷'},
                    {value:234, name:'小赢卡贷'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'现金白卡'}
                ]
            }
        ]
    };
    myChart.setOption(option);

</script>
</body>
</html>